<template>
<div class="role">
  <div class="ribbon">
    <div class="ribbon-content-wrapper">
      <div class="ribbon-content-text">
        <p>购买 AirPods，Apple Music 免费试听 6 个月⁺。</p>
      </div>
    </div>
    <ContextFrist/>
  </div>

  </div>
</template>
<script>
import ContextFrist from './components/ContextFrist.vue';
export default {
  components: { ContextFrist },};
</script>

<style lang="less" scoped>
@keyframes Colorchange {
  0%{
    background-color: #0071e3;
  }
  100%{
   background-color: #f5f5f7;
  }
}
.ribbon {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  .ribbon-content-wrapper {
    height: 48px;
    padding: 16px 0;
    background-color: #0071e3;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 1.8s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name:Colorchange;
    .ribbon-content-text{
        text-align: center;
        margin: auto;
        width: 980px;
        height: 100%;
        p{
          display: block;
          height: 100%;
          width: 100%;
          font-size: 10px;
          color: #565658;
        }
    }
  }
}
</style>